<template>
    <view class="article-detail bg-white">
        <view class="article-detail-header py-[20rpx] px-[30rpx]">
            <view class="text-3xl font-medium">{{ articleData.title }}</view>
            <view class="flex mt-[20rpx] text-xs">
                <view class="mr-[40rpx]" v-if="articleData.author"
                    >作者: {{ articleData.author }}</view
                >
                <view class="text-muted mr-[40rpx] flex-1">{{
                    articleData.create_time
                }}</view>
                <view class="flex items-center text-muted flex-none">
                    <u-icon name="eye" class="w-[30rpx] h-[30rpx]"></u-icon>
                    <view class="ml-[10rpx]">{{
                        articleData.actual_hits + articleData.init_hits
                    }}</view>
                </view>
            </view>
        </view>
        <view class="article-detail-section bg-white p-[24rpx]">
            <view class="desc p-[20rpx] text-base" v-if="articleData.desc">
                <text class="font-medium">摘要: </text> {{ articleData.desc }}
            </view>
            <view class="mt-[20rpx]">
                <u-parse :content="articleData.content"></u-parse>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { articleDetail } from "@/api/cms/article";

const articleData = ref<any>({});
const araticleId = ref(0);

const getData = async (id) => {
    articleData.value = await articleDetail({ id });
};

onLoad((options: any) => {
    araticleId.value = options.id;
    getData(options.id);
});
</script>

<style lang="scss">
.article-detail {
    height: 100%;

    &-header {
        border-bottom: 2rpx solid #f8f8f8;
    }

    &-section {
        .desc {
            border-radius: 12rpx;
            background-color: #f7f7f7;
        }
    }
}
</style>
